@use './common/config.scss' as *;

@mixin ellipsis($width) {
  width: $width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin arrowIcon {
  position: absolute;
  right: 0;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -2.5px;
  border: 2.5px solid transparent;
  border-top: 3px solid #252b3a;
}

@mixin toolbarPicker($content, $width: 40px) {
  width: $width;

  .ql-picker-label::before {
    @include ellipsis($width);
  }

  &.ql-expanded .ql-picker-label {
    color: inherit;
  }

  &:hover {
    color: #5e7ce0;

    i.icon {
      border-top-color: #5e7ce0;
    }
  }

  .ql-picker-label {
    outline: none;
    border: 0;

    .ql-stroke {
      display: none;
    }

    i.icon {
      @include arrowIcon;
    }

    &.ql-active,
    &:hover {
      i.icon {
        border-top-color: #5e7ce0;
      }
    }
  }

  .ql-picker-options {
    color: #8a8e99;
  }
}

@mixin fontSizeList {
  /* Set Dropdown font-size */
  .ql-size {
    @include toolbarPicker('', 98px);
  }

  .ql-size span.ql-picker-options {
    width: 70px;

    span::before {
      font-size: 14px;
    }
  }
}

@mixin lineHeightList {
  .ql-line-height {
    @include toolbarPicker('', 72px);
  }

  .ql-line-height span.ql-picker-options {
    width: 98px;

    span::before {
      font-size: 14px;
    }
  }
}

@mixin fontFamilyList {
  /* Set dropdown font-families */
  .ql-font {
    @include toolbarPicker('', 98px);
  }
}

@mixin mentionLink {
  .ql-mention-link {
    cursor: pointer;
    color: #5e7ce0;
    margin: 0 0.3em;
    text-decoration: underline;
  }
}

// SVG图标
@mixin toolbarSvgColor {
  svg:not(.ql-ai-icon),
  polygon,
  svg:not(.ql-ai-icon) path {
    @content;
  }
}

// 字体图标
@mixin toolbarFontIconColor {
  i {
    @content;
  }
}

@function getCssVar($name) {
  @return var(--#{$namespace}-#{$name});
}

@mixin setCssVar($name, $value) {
  --#{$namespace}-#{$name}: #{$value};
}
